<template>
  <el-card class="order-item-card" shadow="always">
    <el-row class="title">
      <el-col :span="21">
        <div class="flex">
          <el-radio
            @change="itemRadioChange(item)"
            v-model="custOrderRaidoA"
            :label="JSON.parse(item.batchNbr) > 0
                ? item.custSoNumber + '-' + item.batchNbr
                : item.custSoNumber"
            style="margin-right: 0.1rem"><p></p></el-radio>
          <span @click="checkOrderItems(item)" class="u-title">
            {{
              JSON.parse(item.batchNbr) > 0
                ? item.custSoNumber + "-" + item.batchNbr
                : item.custSoNumber
            }}
          </span>
          <span class="m-status-box u-status-ty" v-if="item.audState=='审核同意'"> {{ item.audState ? item.audState : '' }}</span>
          <span class="m-status-box" v-else > {{ item.audState ? item.audState : '' }}</span>
        </div>
      </el-col>
      <!--			<el-col :span="6" class="box-right-icon"> <svg-icon iconClass="warn2" className="big-icon" /> </el-col>-->
      <el-col :span="3" class="box-right-icon right">
        <!-- <svg-icon iconClass="dcl" /> -->
         <div v-if="item.audState=='待送审核'" class="m-status-icon red-icon"></div>
         <div v-else-if="item.audState=='待审核'" class="m-status-icon orange-icon"></div>
         <div v-else-if="item.audState=='审核同意'" class="m-status-icon blue-icon"></div>
      </el-col>
    </el-row>
    <div class="list-info-list">
      <el-row class="list-info">
        <span class="list-info-1">客户编码：</span>
        <span class="list-info-2">{{ item.custNumber }}</span>
      </el-row>
      <el-row class="list-info ne-cus-name flex">
        <span class="list-info-1">客户名称：</span>
        <span class="list-info-2">{{ item.custName }}</span>
      </el-row>
      <el-row class="list-info" :gutter="10">
        <el-col :span="12">
          <span class="list-info-1">受理日期：</span>
           <span class="list-info-2">{{dateFormat(item.createDate)}}</span>
<!--<span class="list-info-2">{{ sysdate }}</span>-->
        </el-col>
        <el-col :span="12">
          <span class="list-info-1">单据类型：</span>
           <span class="list-info-2">{{ item.custOrderTypeName }}</span>
<!--          <span class="list-info-2">新装</span>-->
        </el-col>
         <!-- <el-col :span="7">
          <span class="list-info-1">单据状态：</span>
          <span class="list-info-2">{{ item.statusCd }}</span>
        </el-col>-->
      </el-row>
    </div>
    <el-row class="clearfix ne-button-d">
      <el-popover popper-class="ne-pending" placement="right" trigger="hover">
        <ul class="ne-pending-items flex f-mt0">
          <li v-for="(item2, index) in lookListData" :key="index">
            <a @click="openLookPendDialog(item2, item)">{{ item2.title }}</a>
          </li>
        </ul>
        <el-button
          slot="reference"
          class="ne-btn-bp"
          icon="el-icon-search"
          size="small"
          >查看</el-button
        >
      </el-popover>
      <el-button class="ne-btn-bp" icon="el-icon-sell" @click="uploadFun(item)" size="small">{{item.elecFile}}</el-button>
      <el-popover
        @show="dealTaskEvent(item)"
        popper-class="ne-pending"
        placement="right"
        trigger="hover"
      >
          <ul v-if="pendingListData.length > 0" class="ne-pending-items flex">
            <li v-for="(item2, index) in pendingListData" :key="index">
              <a @click="anchorFun(item2)">{{ item2.title }}</a>
            </li>
          </ul>
          <p v-else>暂无任务</p>
        <el-button
          slot="reference"
          class="ne-mr ne-btn-bp"
          icon="el-icon-pie-chart"
          size="small"
          >待处理</el-button
        >
      </el-popover>
      <span class="btn-xq">
        <!-- <span class="more">更多</span> -->
        <el-popover placement="right" width="480" trigger="click">
          <el-row >
            <el-col :span="12">
              <p class="ne-more-info">
                客户经理：<span>{{ item.custManagerName }}</span>
              </p>
            </el-col>

            <el-col :span="12">
              <p class="ne-more-info">
                项目经理：<span>{{ item.audFirstName }}</span>
              </p>
            </el-col>

            <el-col :span="12">
              <p class="ne-more-info">
                客户经理电话：<span>{{ item.custManagerPhone }}</span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="ne-more-info">
              项目经理电话：<span>{{ item.audFirstPhone }}</span>
              </p>
            </el-col>

            <el-col :span="12">
              <p class="ne-more-info">
                项目编号：<span>{{ item.projectId }}</span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="ne-more-info">
                项目名称：<span>{{ item.projectName }}</span>
              </p>
            </el-col>

            <el-col :span="12">
              <p class="ne-more-info">
                受理运营商：
                <span>
                  {{ item.orderSourceName }}
                </span>
              </p>
            </el-col>

            <el-col :span="12">
              <p class="ne-more-info">
                受理日期：<span>{{ item.createDate }}</span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="ne-more-info">
                审核日期：<span>{{ item.audDate }}</span>
              </p>
            </el-col>

            <el-col :span="12">
              <p class="ne-more-info">
                发起局：<span>{{ item.orgName }}</span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="ne-more-info">
                发起人：<span>{{ item.staffName }}</span>
              </p>
            </el-col>

            <el-col :span="12">
              <p class="ne-more-info">
                发起人电话：<span>{{ item.staffPhone }}</span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="ne-more-info">
                订单来源：<span>{{ item.extSystemName }}</span>
              </p>
            </el-col>

            <el-col :span="12">
              <p class="ne-more-info">
                IDC群号：<span>{{ item.groupNbr }}</span>
              </p>
            </el-col>
          </el-row>
          <el-button class="ne-btn-sp" slot="reference" icon="el-icon-plus" circle size="medium">
          </el-button>
        </el-popover>
      </span>
    </el-row>
    <el-dialog
      class="ne-pending-task"
      append-to-body
      :width="isContent.width"
      :top="isContent.top"
      :title="isContent.title"
      v-if="pendItemVisible"
      :visible.sync="pendItemVisible"
      :close-on-click-modal='false'
    >
      <component
        :show.sync="pendItemVisible"
        :is="isContent.content"
        :ODKInfo="isContent.ODKInfo"
        :CTOInfo="isContent.CTOInfo"
      ></component>
    </el-dialog>
  </el-card>
</template>
<script>
import cardmixin from "@/components/custorder/ItemCard/cardmixin.js";
export default {
  name: "OrderItemCard",
  mixins: [cardmixin],
  methods:{
    /**
     * 查看销售品信息
     */
    checkOrderItems(custOrder) {
      this.$emit("showsale", custOrder);
    }
  }
}
</script>
<style lang="scss" scoped>
.ne-button-d{
  .ne-btn-bp{
    width: 24%;
    //padding: 0 .10rem;
    padding: inherit;
    box-sizing: border-box;
    margin-right: 2%;
    text-align: center;
  }
  .ne-btn-sp{
    padding: 0 .12rem;
  }
}
.ne-more-info{
  line-height: 1.8em;
  span{
    color: $textColor3;
  }
}
 .m-status-icon{
    display: inline-block;
    width:0.42rem;
    height:0.42rem;
    margin-top:0.1rem;
  }
  .red-icon{
    background-image: url("~@/assets/imgs/order/icon-yj-r.png");
    background-size:100% 100%;
  }
  .orange-icon{
     background-image: url("~@/assets/imgs/order/icon-yj-o.png");
    background-size:100% 100%;
  }
  .blue-icon{
     background-image: url("~@/assets/imgs/order/icon-yj-b.png");
    background-size:100% 100%;
  }
.order-item-card {
  .el-card {
    ::v-deep .el-card__body {
      padding: 0 10px 20px;
      .title {
        line-height: 40px;
        border-bottom: 1px solid #e6ebf5;
          .red-icon{
            background:red;
          }
        .box-right-icon {
          text-align: right;
          .svg-icon {
            vertical-align: middle;
            margin-right: 5px;
          }

        }
      }
      .list-info-list {
        padding: 10px 0;
        .list-info {
          font-size: $fontSize_base;
          .list-info-1 {
            line-height: 30px;
            color: #666;
          }
          .list-info-2 {
            color: #999;
          }
        }
      }
    }
    .el-button--small {
      border: 1px solid $blue;
      color: $blue;
      background:#eaf3fd;
    }
  }
  .page {
    text-align: center;
    margin-top: 20px;
  }
  .clearfix {
    .btn-xq {
      float: right;
      //margin-top: -5px;
      .more {
        margin-right: 10px;
      }
    }
    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both;
    }
  }
  ::v-deep .ne-pending {
    max-width: 2rem !important;
  }
}
.el-card__body{
  .el-button{
    background: #eaf3fd;
    color: #3b6fde;
  }
}
.ne-pending {
  .ne-pending-items {
    flex-wrap: wrap;
    max-width: 2.5rem;
    li {
      padding: 0.05rem;
      //width: 1.5rem;
      a {
        color: $textColor1;
        padding-left: 0.1rem;
        position: relative;
        &:hover {
          text-decoration: none;
          color: $blue;
          &:before {
            background-color: $blue;
          }
        }
        &:before {
          display: inline-block;
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 0.05rem;
          height: 0.05rem;
          border-radius: 50%;
          background-color: $textColor1;
        }
      }
    }
  }

}
.u-title{
  color:#333333;
  font-weight:bolder;
}
.ne-cus-name{
  .list-info-1 {
    display: inline-block;
    line-height: .3rem;
  }
  .list-info-2 {
    line-height: .3rem;
    display: inline-block;
    width: calc(100% - 1rem);
    color: #999;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
}
.el-icon-error{
    display: none;
}
.m-box{
  border:1px solid  $blue;
}
.m-status-box{
  padding:0 0.1rem;
  background:#fff5e6;
  color:#f57848;
  border-radius:0.05rem;
  height: 0.3rem;
  line-height:0.3rem;
  font-size:0.12rem;
  margin-left:0.1rem;
}
.u-status-ty{
  background:#eaffe3;
  color:#8ec76a;
}
.flex{
  margin-top: 0.1rem
}
.f-mt0{
  margin-top:0
}
</style>
